<template>
  <div id="competition-management" class="jx-container">
    <div class="jx-content">
      <div class="search-box">
        <el-form
          class="demo-form-inline clearfix"
          :inline="true"
          :model="formInline"
          label-width="90px"
        >
          <el-form-item label="竞赛检索：" prop="user">
            <el-input
              v-model="formInline.matchName"
              placeholder="请输入关键字"
              maxlength="20"
            ></el-input>
          </el-form-item>

          <el-form-item label="竞赛类型：">
            <el-select v-model="formInline.matchType" placeholder="请选择类型" clearable>
              <el-option label="计时赛" value="1"></el-option>
              <el-option label="模拟赛" value="2"></el-option>
              <el-option label="自由练习" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="竞赛状态：">
            <el-select
              v-model="formInline.matchStatus"
              placeholder="请选择状态"
              clearable
            >
              <el-option label="未开始" value="1"></el-option>
              <el-option label="进行中" value="2"></el-option>
              <el-option label="已结束" value="3"></el-option>
              <el-option label="未发布" value="4"></el-option>
              <el-option label="已发布" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="button-style" @click="search">搜索</div>
          </el-form-item>
        </el-form>
        <el-form v-if="!isComment" class="demo-form-inline clearfix" :inline="true">
          <el-form-item>
            <div
              class="button-style"
              @click="
                () => {
                  this.$router.push('competitionDetails?add=1');
                  this.$localstorage.putLocalStorage('courseId', ' ');
                }
              "
            >
              &emsp;添 加&emsp;
            </div>
          </el-form-item>
          <el-form-item>
            <div class="button-style" @click="deleteFn">批量删除</div>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50px"></el-table-column>
          <!-- <el-table-column label="序号" width="50px">
            <template slot-scope="scope"
              ><span>{{ scope.$index + (currentPage - 1) * pagesize + 1 }}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="name" width="120" label="竞赛图标">
            <template slot-scope="scope">
              <img class="icon-table" :src="scope.row.iconPath" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="竞赛名称"></el-table-column>
          <el-table-column
            prop="applyStartTime"
            label="竞赛报名结束时间"
            width="100px"
          ></el-table-column>
          <el-table-column label="竞赛起/止时间" width="170">
            <template slot-scope="scope">
              <span>{{ scope.row.startTime }}</span>
              <span>{{ scope.row.endTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" width="76" label="组织形式">
            <template slot-scope="scope">
              <span v-if="scope.row.form == 1">个人赛</span>
              <span v-if="scope.row.form == 2">小组赛</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" width="76" label="竞赛类型">
            <template slot-scope="scope">
              <span v-if="scope.row.matchType == 1">计时赛</span>
              <span v-if="scope.row.matchType == 2">模拟赛</span>
              <span v-if="scope.row.matchType == 3">自由练习</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="竞赛创建时间"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="matchStatusStr"
            width="76"
            label="竞赛状态"
          ></el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="updataFn(scope.row.courseId, scope.row.form)"
                >详情/修改</el-button
              >
              <div v-if="!isComment">
                <span v-if="scope.row.publishStatus">发布</span>
                <span v-else>撤销</span>
                <el-switch
                  @change="switchChange(scope.row.courseId)"
                  v-model="scope.row.publishStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </div>
              <!-- =======
              <el-button type="text" size="small" @click="updataFn(scope.row.courseId)"
                >详情/修改</el-button
              >
              <div v-if="!isComment">
                <span v-if="scope.row.publishStatus">发布</span>
                <span v-else>取消发布</span>
                <el-switch
                  @change="switchChange(scope.row.courseId)"
                  v-model="scope.row.publishStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </div>
>>>>>>> 5c5e2b3c1ec9d4d258a9c785d25865e1083cccfc -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="totalCount"
          v-if="totalCount > 0"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单
      formInline: {
        matchName: "",
        matchStatus: "",
        matchType: "",
        pageNumber: 1,
        pageSize: 10,
      },
      tableData: [],
      // 当前页码
      currentPage: 1,
      // 每页条数
      pagesize: 10,
      // 总条数
      totalCount: 0,
      questionTypeList: [],
      multipleSelection: [],
      //是否是评委
      isComment: false,
      roles: "",
    };
  },
  created() {
    this.roles = this.$store.state.user.roles[0];
    console.log(this.roles, 222);
    if (this.roles == "COMMENT_TEACHER") {
      this.isComment = true;
    }
    this.init();
  },
  methods: {
    init() {
      this.getList();
    },
    //分页
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage) {
      this.formInline.pageNumber = currentPage;
      this.init();
    },
    getTopicModel() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    search() {
      this.currentPage = 1;
      this.getList();
    },
    //发布按钮
    switchChange(courseId) {
      this.$http
        .get(`/tes/match/tea-set/publish/${courseId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
          this.init();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取导入数据
    getList() {
      this.$http
        .post("/tes/match/tea-set/list", this.formInline)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.tableData = res.data.records;
            this.pagesize = res.data.size;
            this.currentPage = res.data.current;
            this.totalCount = res.data.total;
            console.log(this.tableData, 22);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    updataFn(courseId, form) {
      //放入课程id
      this.$localstorage.putLocalStorage("setCourseId", courseId);
      //放入比赛类型，为排名模块服务
      this.$localstorage.putLocalStorage("gameType", form);
      let url = "competitionDetails";
      if (this.isComment) {
        url = "/CompetitionApproval";
      }
      this.$router.push({
        path: url,
        query: {
          id: courseId,
        },
      });
      this.$localstorage.putLocalStorage("courseId", courseId);
    },
    //删除章节
    deleteFn() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要删除的内容",
          type: "warning",
        });
        return;
      }
      const ids = this.multipleSelection.map((item) => item.courseId);
      this.$confirm("是否删除选中?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post("/tes/match/tea-set/deleteBatch", ids).then(
            (response) => {
              let res = response.data;
              if (res.code == "200") {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.init();
              } else {
                this.$message.error(res.message);
              }
            },
            (err) => {
              console.log("err");
            }
          );
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss">
@import "./../../styles/layout/color_variables";
#competition-management {
  .el-input__icon {
    &.el-icon-circle-close {
      line-height: 32px;
    }
  }
  .el-switch {
    transform: scale(0.9);
  }
  .search-box {
    display: flex;
    justify-content: space-between;
  }
  .jx-content {
    margin-top: 24px;
    .el-form {
      &.el-form--inline {
        .el-form-item__content {
        }
      }
      .el-input-number {
        width: 110px;
        height: 32px;
        line-height: 32px;
        &.is-controls-right {
          .el-input-number__increase {
            height: 16px;
            line-height: 16px;
          }
        }
        .el-input {
          width: 110px;
          input {
            width: 110px;
          }
        }
      }

      .el-form-item {
        margin-bottom: 0;
        .el-form-item__label {
          padding: 0;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  .table {
    margin-top: 18px;
    .icon-table {
      width: 100px;
      height: 100px;
    }
  }
  .jx-add-table-title {
    height: 36px;
    line-height: 36px;
    margin-top: 25px;
    h3 {
      float: left;
      font-size: 14px;
      color: #727272;
      font-weight: normal;
      line-height: 36px;
      margin-left: 20px;
    }
    .add-title-btn-box {
      // float: right;
      span {
        color: #1277eb;
        font-size: 14px;
        margin-right: 50px;
        cursor: pointer;
        i {
          margin-left: 5x;
        }
      }
    }
  }
  .el-dialog__footer {
    text-align: center;
    .dialog-footer {
      .el-button {
        width: 90px;
      }
    }
  }
  //elcel导入
  .dialog-excel {
    .excel-btn-box {
      text-align: center;
      margin-top: 15px;
      height: 32px;
      line-height: 32px;
      .button-style {
        position: relative;
        width: 110px;
        margin-right: 20px;
        &:hover {
          span {
            color: $white;
          }
        }
        #excel-file {
          position: absolute;
          width: 100%;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: #cc281a;
          opacity: 0;
        }
      }
      span {
        color: #1277eb;
        cursor: pointer;
        i {
          vertical-align: text-top;
          margin-left: 5px;
        }
      }
    }
    P {
      margin-top: 25px;
      text-align: center;
      font-size: 14px;
      color: $title-gray;
      i {
        font-size: 18px;
        color: #385899;
        margin-left: 10px;
      }
    }
  }
}
</style>
